<template>
  <div>
    <el-card class="box-card">
      <div class="con">
        <div>
          <p>Total</p>
          {{this.list.length}}
        </div>
        <div>
          <p>Completed</p>
          {{this.completed}}
        </div>
        <div>
          <p>Not Completed</p>
          {{this.notCompleted}}
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import eventBus from '../EventBus/index'
export default {
  data(){
      return{
        list:[],
        completed: 0,
        notCompleted: 0
      }
  },
  created(){
    eventBus.$on('total', (val)=>{
        // console.log(val,'val')
        this.list = val
        this.fn()
    })
    
  },
  methods:{
    // 计算出已完成数
    fn(){
        console.log(this.list[0].status)
        let arr1 = this.list.filter((item)=>item.status === 'Completed')
        let arr2 = this.list.filter((item)=>item.status === 'Not completed')
        this.completed = arr1.length
        this.notCompleted = arr2.length
    }
  }
};
</script>

<style scoped>
.con {
  display: flex;
  justify-content: space-between;
  /* flex-direction: ; */
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
</style>